import React from 'react'
import '../css/todoBroad.css'
import { ITEMS, FINISH, PEDDING } from './config'

class Broad extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: JSON.parse(localStorage.getItem(ITEMS)) || [],
            pedding: [],
            finish: [],
        }
    }

    componentWillReceiveProps(props) {
        this.props = props.item;
        var items = this.state.items;
        var rel = true;
        items.forEach(item=> {
            if(item.val.includes(this.props.val)) {
                rel = false;
            }
        })
        if(rel) {
            items.push(this.props);
            this.setState({
                items: items
            })
        this.filter()
        }
    }
    componentWillMount() {
        this.filter()
    }

    filter = () => {
        this.state.pedding = []
        this.state.finish = []
        this.state.items.forEach((item)=> {
            if(item.status === PEDDING) {
                this.state.pedding.push(item)
            }else if(item.status === FINISH) {
                this.state.finish.push(item)
            }
            this.setState({
                pedding: this.state.pedding,
                finish: this.state.finish
            })
        })
        localStorage.setItem('ITEMS', JSON.stringify(this.state.items))
    }

    del = (item)=> {
        this.state.items.forEach((element, index)=> {
            if(item.val === element.val) {
                this.state.items.splice(index, 1)
            }
            this.setState({
                items: this.state.items
            })
        })
        localStorage.setItem('ITEMS', JSON.stringify(this.state.items))
    }

    render() {
        return (
            <div className="broad_box">
                <div className="broad_items">
                    <div className="finish">
                        <h2>正在进行({this.state.pedding.length})</h2>
                        {
                            this.state.pedding.map((item, index)=> {
                                return <div className="finish_items" key={index}>
                                    <input 
                                    type="checkbox" 
                                    checked={item.status === FINISH}
                                    className="finish_item_checkbox"
                                    onChange={(event)=> {
                                        if(event.target.checked === true) {
                                            item.status = FINISH
                                        }else {
                                            item.status = PEDDING
                                        }
                                        this.setState({
                                            items: this.state.items
                                        })
                                        this.filter()
                                    }} />
                                    <p className="finish_item_content">{item.val}</p>
                                    <button className="finish_item_delete" onClick={()=> {
                                        this.state.pedding.splice(index, 1);
                                        this.setState({
                                            pedding: this.state.pedding
                                        })
                                        this.del(item)
                                    }}>×</button>
                                </div>
                            })
                        }  
                    </div>
                    <div className="done">
                        <h2>已经完成({this.state.finish.length})</h2>
                        {
                            this.state.finish.map((item, index)=> {
                                return <div className="finish_items" key={index}>
                                    <input 
                                    type="checkbox" 
                                    checked={item.status === FINISH}
                                    className="finish_item_checkbox"
                                    onChange={(event)=> {
                                        if(event.target.checked === true) {
                                            item.status = FINISH
                                        }else {
                                            item.status = PEDDING
                                        }
                                        this.setState({
                                            items: this.state.items
                                        })
                                        this.filter()
                                    }} />
                                    <p className="finish_item_content">{item.val}</p>
                                    <button className="finish_item_delete" onClick={()=> {
                                        this.state.finish.splice(index, 1);
                                        this.setState({
                                            finish: this.state.finish
                                        })
                                        this.del(item)
                                    }}>×</button>
                                </div>
                            })
                        } 
                    </div>
                </div>
            </div>
        )
    }
}

export default Broad